<template>
	<view> 
		<!-- 顶部导航 -->
		<fa-navbar :isBackIndex="isBackIndex" :title="vuex_table_title || '活动报名'" :border-bottom="false"></fa-navbar>
		<!-- <view class="activity">
			<image :src="src" mode=""></image>
		</view> -->
		<image class="bg-set" :src="bgimg"></image>
		<view class="activity" >活动报名</view>
		<view class="activity_theme">
			<view class="activity_theme_box">
				<view class="activity_box"></view>
				<view class="activity_theme_title">
					活动主题:
				</view>
			</view>
			<view class="activity_title">{{info.title}}</view>
		</view>
		<view class="activity_map">
			<view class="activity_time">
				<view class="time">
					活动时间：{{info.time_str}}
				</view>
			</view>
			<!-- <u-icon name="map-fill"></u-icon> -->
			<view class="address">
				活动地址：{{info.address}}
			</view>
		</view>
		<view class="activity_conter">活动内容</view>
		<view class="activity_textArat" >
			<view class="activity_text">
			<u-parse :html="info.content" :tag-style="vuex_parse_style"
                 :domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''" @linkpress="navigate"></u-parse>
				</view>
				<view class="activity_contact" style="color: #606266;">
					<view class="activity_cont" style="margin-bottom: 10rpx;">
						活动联系人：{{info.linkman}}
					</view>
					<view class="activity_tel" @click="callTel">
						联系电话：{{info.mobile}}
					</view>
				</view>
				<view class="activity_sign" @click="signUp()" v-if="info.is_signup==0 && !info.form_json.length">
					活动报名
				</view>
				<view class="goIndex" @click="goIndex">
					<u-icon name="home" size="40"></u-icon>
				</view>
       
		<view class="activity_sign" @click="signIn()" v-if="info.is_signup==1">
          活动签到
        </view>
				<view class="sign_time" v-if="info.is_signup>1">
					签到时间：{{info.signuptime}}
				</view>
		</view>
		<!-- <signUp :show="show"></signUp> -->
		<form-mart :form='form' :title="title" v-if="info.is_signup == 0 && info.form_json.length" @changeForm="changeForm"></form-mart>
    <view class="shadow" v-if="notice" ></view>
		<view class="popup" v-show="notice">
			<view class="popup_img">
				<u-image :src="img" mode="" width="280rpx" height="180rpx"></u-image>
			</view>
			<view class="sign_suc">
				<view class="sign_suc_txt">
					报名成功
				</view>
				报名成功，请按时参加
			</view>
			<view class="cancel" @click="notice=false">
				我知道了
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
import formMart from '@/pages/activity/form.vue'
export default {
	computed: {
	},
	components:{
		formMart
	},
	data() {
		return {
      isBackIndex:-2,
			img:this.$image_url+"/uploads/uniapp/image/sign.png",
			bgimg:this.$image_url + '/uploads/uniapp/image/activity.png',
			show: true,
			button_status:5,
			isSign: true,
			id:0,
			ids:'',
			info:{},
			notice:false,
			lock:false,
			form:null,
			select:'',
			investigateInfo:'',
			title:''
			
		};
	},
	onLoad(e) {

    let url = decodeURIComponent(e.q);

    if(url.indexOf("/acqrcode/") != -1 ){

      let query = url.split('/acqrcode/');

      this.id = query[1];

      this.getInfo(this.id);

      this.UserSignIn(query[1]);

    }else{

      this.id = e.id;

      this.getInfo(this.id);
    }

    uni.$on("activitySuccess",(data)=>{

      this.info = data;

      this.notice = true;

    })

    let pages = getCurrentPages();

    let pageNum = pages.length;

    if(pageNum==1){
      this.isBackIndex = 1;
    }

	},
	onShow() {
		// this.isshow()
	},
	methods: {
		changeForm(item){
			this.form = item
		},
		goIndex(){
			this.$u.route('/pages/index/index');
		},
		callTel(){
			if(this.info.mobile){
				uni.makePhoneCall({
				phoneNumber: this.info.mobile //仅为示例
			});
			return;
				return
			}
		},
      signIn(){

        var that = this;

        uni.scanCode({
          success: function (res) {

            if(res.result.indexOf("/acqrcode/") != -1 ){

              let query = res.result.split('/acqrcode/');

              if(query[1]!=that.id){

                uni.showToast({
                  title: '活动二维码场次有误',
				  icon:"none"
                });
                return false;
              }

              that.UserSignIn(query[1]);

            }else{
              uni.showToast({
                title: '二维码信息有误',
				icon:"none"
              });

            }

          }
        });

      },
      async UserSignIn(id){

        let data = {
          activity_id: id,
        };

        let res = await this.$api.SignInActivity(data);

        if (res.code) {

          uni.showToast({
            title:'已签到',
			icon:"none"
          });

          this.info = res.data;

        } else {

          uni.showToast({
            title: res.msg ? res.msg : '数据有误',
			icon:"none"
          });

        }

      },
      async getInfo(id) {

        let data = {
          id: id,
        };

        let res = await this.$api.getActivity(data);

        if (res.code) {
			let form = res.data.form_json
			let ids = this.id
			let valueArr = []
			// this.investigateInfo = res.data.intro.replace("&nbsp;","\u3000")
			console.log(form,'form_json')
			if(form.length != 0){
				form.forEach((item,j)=>{
					  let value = []
					  if(item.type == 'select'){
							let selectArr = []
							// let show = {show:false}
							Object.assign(item,{show:false})
						  item.value.forEach((jtem,index)=>{
							  let valueObj1 = {}
							  valueObj1.value = index
							  valueObj1.label = jtem
							  value.push(valueObj1)
							  item.value = []
							  item.value.push(...value)
						  })
						  item.answer = item.value[0].label
						  console.log(this.select,'this.select')
					  }else if(item.type == 'checkbox') {
						  item.value.forEach((jtem,index)=>{
						  		 let valueObj2 = {}
						  		 valueObj2.name = jtem
						  		 valueObj2.checked = false
								 valueObj2.disabled = false
						  		 value.push(valueObj2)
								 item.value = []
								 item.value.push(...value)
						  })
						  console.log(item,'checkbox')
					  }
					
				})
				form.push(ids)
				this.form = form
			}
			this.info = res.data
		  console.log(form,'valueArr')
        } else {

          uni.showToast({
            title: res.msg ? res.msg : '数据有误',
			icon:"none"
          });

        }
     },
     async signUp(){

       if(this.lock){
         return false;
       }

       this.lcok = true;

       let data = {
         activity_id: this.id,
       };

       let res = await this.$api.joinActivity(data);

       this.lcok = false;

       if(res.code){

         this.info = res.data;

         this.notice = true;

       }else{

         uni.showToast({
           title: res.msg?res.msg:'报名失败',
		   icon:"none"
         });

       }

     },
		 isshow(){
			  this.show = true
			  console.log('11111111111111')
		 }
	},
	onPageScroll(e) {
	},
	//下拉刷新
	onPullDownRefresh() {
	},
	onReachBottom() {
	}
};
</script>

<style lang="scss">
page {
	// background-color: #f4f6f8;
	color: white;
	// background-image: url();
	position: relative;
	.bg-set {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.activity {
		width: 100%;
		height: 120rpx;
		font-size: 60rpx;
		font-weight: bold;
		text-align: center;
		line-height: 120rpx;
	}
	.activity_theme,
	.activity_map{
		// height: 110rpx;
		font-size: 30rpx;
		padding: 0 50rpx;
	}
	.activity_theme_title{
		font-size: 40rpx;
	}
	.activity_title{
		font-size: 40rpx;
		font-weight: bold;
		// width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.activity_time{
		height: 40rpx;
		line-height: 40rpx;
		display: inline-block;
		border-radius: 15rpx;
		// padding: 0 10rpx;
		padding-right: 10rpx;
		background-color: white;
		color: red;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		.time {
			display: inline-block;
			height: 44rpx;
			margin-left: 10rpx;
			font-size: 32rpx;
		}
	}
	.activity_conter {
		// width: 100%;
		height: 90rpx;
		font-size: 50rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
	}
	.activity_textArat {
		width: 85%;
		// height: 680rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		color: #dd3835;
		.activity_text{
			// overflow: auto;
			background-color: none;
		}
		.activity_contact {
			margin-top: 30rpx;
			font-size: 32rpx;
			color: #000;
			// justify-content: space-between;
			margin-bottom: 30rpx;
		}
		.activity_sign {
			width: 320rpx;
			height: 88rpx;
			background-color: #da3931;
			line-height: 88rpx;
			font-size: 34rpx;
			border-radius: 30rpx;
			font-weight: bold;
			text-align: center;
			color: white;
			margin: 30rpx auto 0;
		}
		.sign_time {
			width: 80%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin: 0 auto;
			border-top: 3rpx dashed red;
			border-bottom: 3rpx dashed red;
		}
	}
	.popup {
    z-index: 220;
		width: 70%;
		height: 500rpx;
		background-color: white;
		border-radius: 30rpx;
		color: black;
		position: absolute;
		left: 50%;
		top: 30%;
		margin-left: -35%;
		// position: relative;
		.popup_img {
			margin: 30rpx 0 0 25%;
		}
		.sign_suc {
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 60rpx;
			.sign_suc_txt {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
		}
		.cancel {
			width: 280rpx;
			height: 80rpx;
			background-color: red;
			color:white;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			border-radius: 60rpx;
		}
	}
	._br {
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}
	.address{
		font-size: 32rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.goIndex{
		position: fixed;
		right: 30rpx;
		top: 180rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 60rpx;
		font-size: 26rpx;
		text-align: center;
		background-color: #d9001b;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
  .shadow{
    width: 100%;
    height: 100%;
    background-color: #999999;
    opacity: 0.5;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 10px;
    box-sizing: border-box;
  }
}
</style>
